import React,{useEffect, useRef} from 'react'
import E from 'wangeditor'
import Cloud from 'leancloud-storage'
const getBase64 = (img, callback) => {
  //将本地文件资源对象、转换为base64编码
  const reader = new FileReader();
  reader.addEventListener("load", () => callback(reader.result));
  reader.readAsDataURL(img);
};
export default function RichText(props) {
  let editRef = useRef()
  useEffect(()=>{
    console.log(editRef);
    let editor = new E(editRef.current)  //创建富文本对象实例
    // 配置菜单栏，设置不需要的菜单
    editor.config.excludeMenus = [
      'emoticon',
      'video',
      'table',
      'code',
    ]
    editor.config.zIndex = 50  
    editor.config.onblur = function (newHtml) {
      console.log('onblur', newHtml) // 获取最新的 html 内容
      props.onChange(newHtml) //向表单传递数据
    }
    editor.config.customUploadImg = function (resultFiles, insertImgFn) {
        // resultFiles 是 input 中选中的文件列表
        // insertImgFn 是获取图片 url 后，插入到编辑器的方法
        console.log(resultFiles);
        getBase64(resultFiles[0],(base64)=>{
          console.log(base64);
          let file = new Cloud.File('img.png',{base64})
          file.save().then(res=>{
            let {url} = res.attributes
            insertImgFn(url) // 上传图片，返回结果，将图片插入到编辑器中
          })
        })
       
    }
    editor.create() //渲染富文本编辑器
    return ()=>{ //可以在useEffect下次调用前执行
      editor.destroy() //避免因为反复在同一个div容器创建编辑器触发报错
    }
  },[])
  return (
    <div ref={editRef}>RichText</div>
  )
}
